<template>
    <div>
        <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
        <div class="bg_div">
            <img src="../../assets/img/back_search.png" class="back_img" @click="toMap"/>
            <div class="total">{{personList.length}}人</div>
        </div>
        <div v-if="personList.length > 0" class="forSwipeRight">
            <div v-for="(item,index) in personList" :key="index" class="personList">
                <div v-if="item.url == '' || item.url == undefined">
                    <div class="no_photo" v-if="item.USER_FULLNAME.length < 3">
                        {{item.USER_FULLNAME}}    
                    </div>
                    <div class="no_photo" v-else>
                        {{item.USER_FULLNAME.substring(0,1)}}
                    </div>
                </div>
                <div v-else>
                    <img :src="item.url" class="photo"/>
                </div>
                <div class="personInfo">
                    <div class="personName">{{item.USER_FULLNAME}}</div>
                    <div class="personUnit">{{item.UNITNAME}}</div>
                </div>
            </div>
        </div>
        <div v-else class="forSwipeRight">
            暂无数据
        </div>
        </v-touch>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    name : 'personList',
    data(){
        return{
            projectId : this.$route.params.projectId,
            personList:[],
            imgList:[],
            personList1 : [],
        }
    },
    created(){
        this.queryInfo();
    },
    methods:{
        onSwipeRight(){
             this.$router.push({
                path:'/map',
                name:'map'
            })
        },
        toMap(){
            //console.log("ququququ")
            this.$router.push({
                path:'/map',
                name:'map'
            })
        },
        queryInfo(){
            console.log("收到的id",this.projectId);
            this.$ajax({
                url : this.COMMON_URL,
                data:{
                    _method : "HOME_FIX_PERMISSION_MENU.getPersonsByProId",
                    projectId : this.projectId
                },
                async : false,
                method : 'post',
            }).then(res=>{
                this.getImgUrl(res);
                // this.personList = this.personList1;
            })
        },
        getImgUrl(res){
            this.personList1 = res.data.data;
            for(let i=0;i<this.personList1.length;i++){
                this.$ajax({
                    url : this.COMMON_URL,
                    method : 'post',
                    data : {
                        _method : "FIX_ACC_FILE_INFO.getFileWebPath",
                        fieldToken : this.personList1[i].PHOTO
                    },
                    async : false,
                }).then(res=>{
                    console.log(res)
                    var length = res.data.data.length;
                    var imgUrlStr = "";
                    let data1 = this.personList1[i]
                    if(length > 0){
                        var data = res.data.data[0];
                        imgUrlStr = data.FileUrl;
                        if(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/") != -1){
                            imgUrlStr = process.env.BASE_URL + '/qhszpm/' + imgUrlStr.substring(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/"));
                        }
                        
                        data1['url'] = imgUrlStr
                    }
                    this.$set(this.personList, i ,data1)//给对象新增属性，让对象能实时响应
                })
            }
                
        }
    }

}
</script>

<style>
.forSwipeRight{
    width: 100%;
    height: -webkit-fill-available;
}
.total{
    font-size:32px;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(255,255,255,1);
    line-height:40px;
    padding: 10px;
}
.bg_div{
    background:url('../../assets/img/my_bg.png');
    height: 150px;
}
.back_img{
    padding: 20px;
    width: 16px;
    height: 30px;
}
.no_photo{
    width:50px;
    height:50px;
    background:linear-gradient(180deg,rgba(106,135,255,1),rgba(77,102,254,1));
    border-radius:50%;
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.photo{
    width:50px;
    height:50px;
    border-radius:50%;
}
.personList{
    display: flex;
    padding: 15px;
    align-items: center
}
.personInfo{
    margin-left: 5%;
}
.personName{
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(25,25,25,1);
    line-height:20px;
}
.personUnit{
    font-size:13px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:20px;
    margin-top: 10%;
}
</style>
